<template>
  <Card dis-hover>
      <div class="tableTop" slot="title">
        <Button icon="ios-download-outline" type="primary" @click="exportUser">导出数据</Button>
        <p>用户管理</p>
        <Input enter-button placeholder="输入姓名查询" class="searchBox" clearable
        @on-enter="searchUser" @on-clear="getUserList" v-model="userName">
            <Icon type="ios-search" slot="prefix" />
        </Input>
      </div>
      <div>
        <Table border :columns="columns" :data="userList" :loading="loading" stripe >
            <template slot="action" slot-scope="scope">
                <Tooltip content="删除" placement="top">
                    <Button type="error" icon="md-close" @click="showDeleteBox(scope.row.userId)"></Button>
                </Tooltip>
                <Tooltip content="修改" placement="top">
                    <Button type="primary" class="btn" icon="md-create" @click="showEditBox(scope.row.userId)"></Button>
                </Tooltip>
            </template>
        </Table>
      </div>
      <!-- 分页 -->
      <div class="page">
        <Page :total="total" :page-size="10" @on-change="currentPage" />
      </div>
      <!-- 删除对话框 -->
      <Modal title="确定信息" class-name="vertical-center-modal" v-model="showDelete" :width="300">
            <p slot="header" style="color:#f60;text-align:center">
                <Icon type="ios-information-circle"></Icon>
                <span>删除用户</span>
            </p>
            <div style="text-align:center">
                <p>请确认删除该用户</p>
            </div>
            <div slot="footer">
                <Button type="error" size="large" long @click="deleteUser">确定</Button>
            </div>
      </Modal>
      <!-- 修改对话框 -->
      <Modal title="修改信息" class-name="vertical-center-modal" v-model="showEdit" 
      @on-ok="saveUser">
        <Form :model="userData" label-position="left" :label-width="100">
            <FormItem label="用户编号">
                <Input v-model="userData.userId" readonly></Input>
            </FormItem>
            <FormItem label="姓名">
                <Input v-model="userData.name"></Input>
            </FormItem>
            <FormItem label="年龄">
                <Input v-model="userData.year"></Input>
            </FormItem>
            <FormItem label="性别">
                <Input v-model="userData.sex"></Input>
            </FormItem>
            <FormItem label="电话">
                <Input v-model="userData.phone"></Input>
            </FormItem>
            <FormItem label="住址">
                <Input v-model="userData.roomId"></Input>
            </FormItem>
        </Form>
      </Modal>
  </Card>
</template>

<script>
export default {
  data () {
      return {
          columns: [
              {
                  title: '用户编号',
                  key: 'userId',
                  sortable: true
              },
              {
                  title: '姓名',
                  key: 'name'
              },
              {
                  title: '年龄',
                  key: 'year',
                  sortable: true
              },
              {
                  title: '性别',
                  key: 'sex'
              },
              {
                  title: '电话',
                  key: 'phone',
                  width:150
              },
              {
                  title: '住址',
                  key: 'roomId',
                  width:200
              },
              {
                  title: '操作',
                  slot: 'action',
                  align: 'center',
                  width:180
              }
          ],
          userList:[],
          total: 0,
          page: 0,
          loading: true,
          showEdit: false,
          showDelete: false,
          userData: {},
          userId: 0,
          userName:''
      }
  },
  created(){
      this.getUserList()
  },
  methods: {
      async getUserList(){
          this.loading=true
          this.userName=''
          const {data:res} = await this.$http.get(`/user/allUser/${this.page}`)
        //   console.log(res.data)
          this.total=res.data.totalElements
          this.userList=res.data.content
          this.loading=false
      },
      currentPage(newPage){
          this.page = newPage-1
          if(typeof userName !== 'undefined')this.searchUser()
          else this.getUserList()
      },
      showDeleteBox(userId){
          this.showDelete=true
          this.userId=userId
      },
      async deleteUser(){
          const {data:res} = await this.$http.delete(`/user/userId/${this.userId}`)
        //   console.log(res)
          this.page=0
          this.getUserList()
          this.showDelete=false
      },
      async showEditBox(userId){
          this.userData={}
          this.userId=userId
          this.showEdit=true
          const {data:res} = await this.$http.get(`/user/userId/${userId}`)
          this.userData = res.data
      },
      async searchUser(){
          this.page=0
          const {data:res} = await this.$http.get(`/user/userName/${this.userName}/${this.page}`)
          this.total=res.data.totalElements
        //   console.log(res)
        
          this.userList=res.data.content
          this.total=this.userList.size
      },
      async saveUser(){
          const {data:res} = await this.$http.post(`/user/oneUser`, this.$qs.stringify(this.userData))
          if(res.errorCode !== 200)return this.$message.error('保存失败')
          this.getUserList()
          return this.$message.success('保存成功')
      },
      exportUser(){
        this.$http({
            method: "GET",
            url: '/export/exportUser',
            responseType: 'blob'
        }).then(res => {
            // console.log(res)
            let blob = new Blob([res.data], {type: 'application/vnd.ms-excel'});
            window.URL = window.URL || window.webkitURL;
            let href = URL.createObjectURL(blob);
            let downA = document.createElement("a");
            downA.href =  href;//
            downA.download = '用户表.xls';
            downA.click();
            window.URL.revokeObjectURL(href);
        })
      }
  }
}
</script>

<style>
.page{
    margin: 15px 0;
}
.btn{
    margin: 0 8px;
}
.tableTop{
    justify-content: space-between;
    display: flex;
}
.searchBox{
    width: 260px;
}
</style>